<template>
	<!-- 报表查询 -->
	<div class="tableQuery">
		<!-- title -->
		<div class="title">
			<i class="el-icon-tickets" style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;;background-color: #409EFF;color: #fff;"></i>
			<span style="font-size: 12px;font-weight:400;;margin-left: 12px;">图表统计</span>
		</div>
		<!-- shaixuan -->
		<div class="shaixuan">
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
			  <el-form-item label="年度" size="mini">
			    <el-input v-model="formInline.year" placeholder="年度"></el-input>
			  </el-form-item>
			  <el-form-item label="部门" size="mini">
			    <el-select v-model="formInline.region" placeholder="部门">
			      <el-option label="部门一" value="shanghai"></el-option>
			      <el-option label="部门二" value="beijing"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="报表名称" size="mini">
			     <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
			  </el-form-item>
			  <el-form-item size="mini">
			    <el-button type="primary" @click="onSubmit">查询</el-button>
			  </el-form-item>
			</el-form>
		</div>
		<!-- echarts -->
		<!-- <div class="echarts" ref="echarts">
			<echarts></echarts>
		</div> -->
		<!-- 测试高度 -->
		<TableQuery></TableQuery>
	</div>
</template>

	
<script>
	// selfs / sons
	import echarts from '../../components/echarts/SelectEcharts.vue'
	import TableQuery from '../../external/comment/TableQuery.vue'
	export default {
		components: {
			echarts,TableQuery
		},
		data() {
			return {
				search: '',
				like: true,
				value1: 66.88,
				newPersons: 1314,
				title: "增长人数",
				echarts: {},
				// 筛选条件
				formInline: {
				  year: '2024',
				  region: ''
				},
				linehartOptions: {
				  title: {
				    text: "数据统计",
				    left: 20,
				  },
				  tooltip: {
				    trigger: "axis",
				  },
				  legend: {
				    data: ["订单", "销售额", "注册人数", "管理员人数"],
				  },
				  grid: {
				    left: "3%",
				    right: "4%",
				    bottom: "3%",
				    containLabel: true,
				  },
				
				  xAxis: {
				    type: "category",
				    boundaryGap: false,
				    data: [
				      "2024/1/10",
				      "2024/1/11",
				      "2024/1/12",
				      "2024/1/13",
				      "2024/1/14",
				      "2024/1/15",
				      "2024/1/16",
				    ],
				  },
				  yAxis: {
				    type: "value",
				  },
				  series: [
				    {
				      name: "管理员人数",
				      type: "line",
				      stack: "Total",
				      data: [520, 132, 101, 134, 90, 230, 210],
				    },
				    {
				      name: "销售额",
				      type: "line",
				      stack: "Total",
				      data: [220, 182, 191, 234, 290, 330, 310],
				    },
				    {
				      name: "注册人数",
				      type: "line",
				      stack: "Total",
				      data: [150, 232, 201, 154, 190, 330, 410],
				    },
				    {
				      name: "订单",
				      type: "line",
				      stack: "Total",
				      data: [320, 332, 301, 334, 390, 330, 320],
				    },
				  ],
				 },
			};
		},
		methods: {
			// 窗口大小事件
			resizeListener() {
			  this.linehart.resize();
			},
			onSubmit() {
				console.log('submit!');
			}
		},

	};
</script>

<style lang="less">
	
	.tableQuery{
		margin: 8px;
		// 筛选条件
		.shaixuan{
			margin: 8px;
			display: flex;
			align-items: center;
			// elform
			// ::v-deep .el-form-item__content {
			// 	height: 30px !important;
			// 	line-height: 30px !important;
			// }	
			// .demo-form-inline{
			// 	height: 28px;
			// 	line-height: 28px;
			// }
		}
		// eachrts盒子
		.echarts {
		  flex: 1;
		  display: flex;
		  justify-content: center;
		  background-color: white;
		  margin: 15px 0;
		  min-height: 350px;
		}
	}

</style>